<template>
    <p>ref demo {{ageRef}} {{state.name}}</p>
</template>

<script>
import { ref, reactive } from 'vue'

/* 基本数据类型的响应式 */
export default {
    name: 'Ref',
    setup() {
        /* 值类型 响应式 */
        const ageRef = ref(20) 
        const nameRef = ref('steve')

        /* 对象类型响应式（每个基础类型都需要一个单独的ref） */
        const state = reactive({
            name: nameRef
        })

        setTimeout(() => {
            // 访问基础数据类型的响应式
            console.log('ageRef.value', ageRef.value)

            /* 修改基础数据类型的ref.value */
            ageRef.value = 25 // .value 修改值
            nameRef.value = 'steveA'
        }, 1500);

        /* 向模板返回响应式数据（数据驱动视图） */
        return {
            ageRef,
            state
        }
    }
}
</script>